<template>
  <div >
    <div id="dndContainer" style="display:inline-block;height: 800px;width: 300px;background:red ">
      <el-tree
        style="height:100%"
        @mousedown.native = 'startDrag'
        :data="data"
        :props="defaultProps"
        default-expand-all
        ref="tree"></el-tree>
    </div>
    <el-button @click="doC">11111</el-button>
    <div id="container" style="position:absolute;display:inline-block;margin-left:20px;background:red"></div>
  </div>
</template>

<script>
import { Graph } from "@antv/x6";
import { Dnd } from '@antv/x6-plugin-dnd'

export default {
  name: "X6Next",
  data() {
    return {
      filterText: '',
      data: [{
        id: 1,
        label: '一级 1',
        children: [{
          id: 4,
          label: '二级 1-1',
          children: [{
            id: 9,
            myNodeType:'rect',
            label: '三级 1-1-1'
          }, {
            id: 10,
            myNodeType:'circle',
            label: '三级 1-1-2'
          }]
        }]
      }, {
        id: 2,
        label: '一级 2',
        children: [{
          id: 5,
          label: '二级 2-1'
        }, {
          id: 6,
          label: '二级 2-2'
        }]
      }, {
        id: 3,
        label: '一级 3',
        children: [{
          id: 7,
          label: '二级 3-1'
        }, {
          id: 8,
          label: '二级 3-2'
        }]
      }],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    };
  },
  methods:{
    doC(){
      console.log(this.graph.getNodes());
    },
    startDrag(e){
      e.preventDefault();
      const rect = this.graph.createNode({
        id:'12312312312312323',
        width: 100,
        height: 40,
        label: 'Rect',
        attrs: {
          body: {
            stroke: '#8f8f8f',
            strokeWidth: 1,
            fill: '#fff',
            rx: 6,
            ry: 6,
          },
        },
      })
      const circle = this.graph.createNode({
        width: 60,
        height: 60,
        shape: 'circle',
        label: 'Circle',
        attrs: {
          body: {
            stroke: '#8f8f8f',
            strokeWidth: 1,
            fill: '#fff',
          },
        },
      })
      if(e.target.nodeName==='SPAN'){
        const myNodeType = e.target.getAttribute('my-node-type')
        if(myNodeType==='rect'){
          this.dnd.start(rect, e)
        }else if(myNodeType==='circle'){
          this.dnd.start(circle, e)
        }
      }
    }
  },
  mounted() {
    const graph = this.graph = new Graph({
      container: document.getElementById("container"),
      width: 1000,
      height: 800,
      interacting: {
        nodeMovable: false,
        edgeMovable: false
      },
      background: {
        color: "#f8f8f2",
      },
    });
    const dnd = this.dnd = new Dnd({
      getDragNode: (node) => node.clone({ keepId: true }),
      getDropNode: (node) => node.clone({ keepId: true }),
      target: graph,
      scaled: false,
      dndContainer: document.getElementById("dndContainer"),
    })
  }
}
</script>

<style scoped>

</style>
